<template>
	<view :data-theme="theme">
		<view class="example">
			<!-- 基础用法，不包含校验规则 -->
			<u--form labelPosition="left" style="margin: 0 20rpx;" :model="baseFormData" :rules="rules" ref="uForm">
				<u-form-item label="联系人类型" required prop="contacts" labelWidth="80">
					<input v-model="baseFormData.contacts" disabled placeholder="请选择" border="none"></input>
					<u-icon slot="right" name="arrow-right" @click="openContactSetting()"></u-icon>
				</u-form-item>
				<u-form-item label="联系人" required prop="name" labelWidth="80">
					<input v-model="baseFormData.name" placeholder="请输入联系人" border="none"></input>
				</u-form-item>
				<u-form-item label="联系电话" required prop="telephone" labelWidth="80">
					<input v-model="baseFormData.telephone" placeholder="请输入联系电话" border="none"></input>
				</u-form-item>
				<u-form-item label="联系邮箱" required prop="email" labelWidth="80">
					<input v-model="baseFormData.email" placeholder="请输入联系邮箱" border="none"></input>
				</u-form-item>
				<u-form-item label="适用城市" required prop="city" labelWidth="80">
					<input v-model="baseFormData.city" disabled placeholder="请选择" border="none"></input>
					<u-icon slot="right" name="arrow-right" @click="openUpDataSetting()"></u-icon>
				</u-form-item>
			</u--form>
		</view>

		<!-- 选择联系人类型 弹窗 -->
		<tui-drawer mode="bottom" :visible="showUpContactPopup" @close="closeContactDate">
			<view class="ensure">
				<view class="title"><text @click="closeContactDate" class="iconfont icon-guanbi5"></text>请选择联系人类型<text
						@click="ContactDate" class="iconfontRight">确认</text></view>
				<view class="list" style="height: auto;padding-top: 20rpx;">
					<!-- <u-radio-group placement="column" @change="contactCheckboxChange" :borderBottom="true"
						iconPlacement="right">
						<u-radio :customStyle="{marginBottom: '16px'}" v-for="(item, index) in contactCheckList"
							:key="index" :label="item.name" :name="item.id">
						</u-radio>
					</u-radio-group> -->
					<radio-group @change="contactCheckboxChange">
						<label style="display: flex;flex-direction: row;margin: 20rpx;border-bottom: 1px solid #eee;padding: 20rpx 0;"
							v-for="(item, index) in contactCheckList"
								:key="index">
							<view>
								<radio :value="item.name" />
							</view>
							<view style="line-height: 19px;">{{item.name}}</view>
						</label>
					</radio-group>
					<view style="height: 50px;"></view>
				</view>
			</view>
		</tui-drawer>

		<!-- 选择城市 弹窗 -->
		<tui-drawer mode="bottom" :visible="showUpDatePopup" @close="closeComuleDate">
			<view class="ensure">
				<view class="title"><text @click="closeComuleDate" class="iconfont icon-guanbi5"></text>请选择适用城市<text
						@click="ComuleDate" class="iconfontRight">确认</text></view>
				<view class="list" style="height: auto;padding-top: 20rpx;">
					<!-- <u-checkbox-group @change="comuleCheckboxChange" :borderBottom="true" placement="column"
						iconPlacement="right">
						<u-checkbox shape="circle" :customStyle="{marginBottom: '16px'}"
							v-for="(ele, index) in addOperateList" :key="index" :label="ele.name"
							:name="JSON.stringify(ele)">
						</u-checkbox>
					</u-checkbox-group> -->
					<checkbox-group class="checke_list" @change="comuleCheckboxChange">
						<view class="uni-list-cell uni-list-cell-pd checke_item"
							v-for="(ele, index) in addOperateList" :key="index">
							<view class="item_top"
								style="justify-content: space-between;display: flex;margin: 20rpx;border-bottom: 1px solid #eee;padding-bottom: 20rpx;">
					
								<view class="item_img">
									{{ele.name}}
								</view>
								<checkbox :value="JSON.stringify(ele)" class="round-checkbox"
									/>
							</view>
						</view>
					</checkbox-group>
					<view style="height: 50px;"></view>
				</view>
			</view>
		</tui-drawer>

		<view class="footer">
			<view style="margin:0 20rpx 20rpx 20rpx;">
				<!-- <u-button :color="bgColor" text="确认保存" style="color: #fff;" @click="upAddCancel"></u-button> -->
				<button :color="bgColor" class="bg_color"
					style="font-weight: bold;border-radius: 16rpx;color: #FFF;padding: 20rpx;" @click="upAddCancel">确认保存</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		queryBusinessOperateCityApi
	} from '@/api/businessStatus.js';
	import tuiDrawer from '@/components/tui-drawer/index.vue';
	// import UniForms from '@/uni_modules/uni-forms/components/uni-forms/uni-forms.vue'; // 根据实际路径进行修改
	import {
		setThemeColor
	} from '@/utils/setTheme.js'
	let app = getApp();
	export default {
		// comments: {
		// 	UniForms,
		// },
		components: {
			tuiDrawer
		},
		data() {
			return {
				theme: app.globalData.theme,
				contactAttrParam: {},
				// 基础表单数据
				baseFormData: {
					name: '',
					telephone: null,
					email: '',
					contacts: null,
					city: null,
				},
				rules: {
					contacts: {
						type: 'number',
						required: true,
						message: '请选择联系人类型',
						trigger: ['blur', 'change']
					},
					name: {
						type: 'string',
						required: true,
						message: '请输入联系人',
						trigger: ['blur', 'change']
					},
					telephone: [{
						required: true,
						message: '请输入联系电话',
						trigger: ['blur', 'change']
					}, {
						pattern: /^[1][3,4,5,7,8,9][0-9]{9}$/,
						required: true,
						message: '请输入正确的手机号码',
						trigger: ['blur', 'change']
					}],
					email: [{
						type: 'string',
						required: true,
						message: '请输入联系邮箱',
						trigger: ['blur', 'change']
					}, {
						trigger: ["blur", "change"],
						pattern: /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/,
						message: "请输入正确的邮箱",
					}],
					city: {
						type: 'string',
						required: true,
						message: '请选择适用城市',
						trigger: ['blur', 'change']
					},
				},
				contactCheckList: [{
						name: '业务负责人',
						id: 1,
					},
					{
						name: '售后联系人',
						id: 2,
					}
				],
				showUpContactPopup: false,
				contactValues: '',
				//-- 经营城市选择
				addOperateList: [],
				showUpDatePopup: false,
				businessInfo: {},
				// ----------
				checkBoxValue: [],
			};
		},
		onLoad() {
			this.bgColor = setThemeColor();
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.bgColor,
			});
			this.getOperateCity();
			// console.log(params);
			// let baseFormData = JSON.parse(params.data);
			// if(baseFormData != null){
			// 	console.log(baseFormData);
			// 	this.baseFormData = baseFormData;
			// }
			let that = this

			// APP-NVUE平台暂不支持以this.getOpenerEventChannel()方式获取eventChannel，请换用this.$scope.eventChannel来获取
			// #ifdef APP-NVUE
			const eventChannel = this.$scope.eventChannel; // 兼容APP-NVUE
			// #endif
			// #ifndef APP-NVUE
			const eventChannel = this.getOpenerEventChannel();
			// #endif
			// 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
			eventChannel.on('contactsAttr', function(param) {
				console.log(param)
				that.contactAttrParam = param;
				if (param.type == "edit") {
					uni.setNavigationBarTitle({
						title: '修改联系人'
					});

					that.baseFormData = {
						...param.data
					}; //克隆属性
					// that.formDataInit();
				} else {}
			});
		},
		methods: {
			getOperateCity() {
				queryBusinessOperateCityApi({
					queryType: 0
				}).then((res) => {
					this.addOperateList = res.data;
				})
			},
			// 选择城市弹窗
			openUpDataSetting() {
				this.showUpDatePopup = true;
			},
			// 关闭选择城市
			closeComuleDate() {
				this.showUpDatePopup = false;
			},
			// 选择城市复选框
			comuleCheckboxChange(value) {
				// const values = value;
				const values = value.detail.value;
				this.checkBoxValue = values.map(item => JSON.parse(item));
				// console.log(this.checkBoxValue)
			},
			// 售卖城市确认弹窗
			ComuleDate() {
				this.baseFormData.city = this.checkBoxValue[0].name;
				this.showUpDatePopup = false;
			},
			// ------------
			// 选择联系人类型弹窗
			openContactSetting() {
				this.showUpContactPopup = true;
			},
			// 关闭选择联系人类型
			closeContactDate() {
				this.showUpContactPopup = false;
			},
			contactCheckboxChange(ele) {
				// const contactValues = value;
				const contactValues = ele.detail.value;
				this.contactValues = contactValues;
			},
			// 联系人类型确认弹窗
			ContactDate() {
				this.baseFormData.contacts = this.contactValues;
				this.showUpContactPopup = false;
			},
			// 确认保存
			upAddCancel() {
				// 更新商标识
				let isUpdate = this.contactAttrParam.type == "edit";
				let that = this;
				this.$refs.uForm.validate().then(res => {
					uni.$u.toast('校验通过')
					that.contactAttrParam.data = that.baseFormData;
					// that.toSaveProductAttr(that.productAttrParam);
					that.toSaveContactsAttr(that.contactAttrParam)

				}).catch(errors => {
					uni.$u.toast('请输入正确信息')
				})
			},
			//保存商品规格返回商品页面
			toSaveContactsAttr(param) {
				let pages = getCurrentPages() // 获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。
				let prevPage = pages[pages.length - 2] //上一页页面实例
				uni.navigateBack({
					delta: 1,
					success: () => {
						prevPage.$vm.otherFun(param) // 给上一页绑定方法otherFun,
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.bg_color {
		@include main_bg_color(theme);
	}
	
	.example {
		padding: 15px;
		background-color: #fff;
	}

	.ensure {
		width: 100%;
		background-color: #fff;
		padding-bottom: 22rpx;
		padding-bottom: calc(22rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
		padding-bottom: calc(22rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/

		.title {
			font-size: 32rpx;
			color: #282828;
			text-align: center;
			margin: 38rpx 0 36rpx 0;
			position: relative;

			.iconfont {
				position: absolute;
				left: 30rpx;
				top: 0;
				font-size: 36rpx;
			}

			.iconfontRight {
				position: absolute;
				right: 30rpx;
				top: 0;
				font-size: 36rpx;
			}
		}

		.list {
			height: 750rpx;
			margin: 0 30rpx;
			overflow-x: hidden;
			overflow-y: auto;

			.item {
				margin-bottom: 52rpx;

				.pictrue {
					width: 36rpx;
					height: 36rpx;
					border-radius: 50%;
					margin-right: 30rpx;

					/deep/image,
					.easy-loadimage,
					image,
					uni-image {
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}

				.text {
					width: 618rpx;
					color: #999999;
					font-size: 28rpx;

					.name {
						color: #333333;
						font-weight: bold;
						margin-bottom: 20rpx;
					}
				}
			}
		}
	}

	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		padding: 20rpx 0;
		// display: flex;
		justify-content: space-between;
		text-align: center;
		justify-items: center;
	}
</style>